<template>
  <div>
    <el-container>
      <el-main>
        <el-container>
          <el-header class="header" style="padding: 0;">
            <el-form :inline="true">
              <el-form-item>
                <el-button type="primary" @click="addDeatil">添加回调地址</el-button>
              </el-form-item>
            </el-form>
          </el-header>
        </el-container>
        <el-table :data="addressList" style="width: 100%">
          <el-table-column label="公众号" prop="publicAccountNickname"></el-table-column>
          <el-table-column label="appid" prop="appId"></el-table-column>
          <el-table-column label="回调地址" prop="dataUrl"></el-table-column>
          <el-table-column label="操作" width="270">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="showDetail(scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="delData(scope.row.appId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 新增群库 -->
      <el-dialog title="回调地址配置" :visible.sync="dialogFormVisible" top="13vh">
        <el-form :model="groupCollection" ref="groupCollection">
          <el-form-item label="公众号" :label-width="formLabelWidth" prop="appId">
            <el-select v-model="groupCollection.appId" placeholder="选择公众号">
              <el-option v-for="item in defaultPublicAccount" :key="item.appId" :label="item.publicAccountNickname" :value="item.appId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="回调地址" :label-width="formLabelWidth" prop="dataUrl">
            <el-input v-model="groupCollection.dataUrl" auto-complete="off" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="close">取 消</el-button>
          <el-button type="primary" @click="formSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import service from '../../../service/count';

export default {
  data() {
    return {
      publicNumberName: '',
      addressList: [],
      dialogFormVisible: false,
      formLabelWidth: '110px',
      defaultPublicAccount: [],
      groupCollection: {
        appId: '',
        dataUrl: ''
      },
    };
  },
  mounted() {
    this.initData()
  },
  computed: {
  },
  methods: {
    initData() {
      this.$store.dispatch('getPublicAccountsWithDefault', this.defaultPublicAccount).then((res) => {
        this.defaultPublicAccount = res;
        this.addressList = res.filter((item)=> {
          return item.dataUrl
        })
      });
    },
    formSubmit() {
      service.setDataUrl(this.groupCollection).then((res) => {
        if(res === '更新成功') {
          this.dialogFormVisible = false
          this.initData()
        }
      });
    },
    delData(appId) {
      this.groupCollection = {
        appId: appId,
        dataUrl: ''
      }
      this.formSubmit()
    },
    addDeatil() {
      this.dialogFormVisible = true
      this.groupCollection = {
        appId: '',
        dataUrl: ''
      }
    },
    showDetail(data) {
      this.dialogFormVisible = true
      this.groupCollection.appId = data.appId
      this.groupCollection.dataUrl = data.dataUrl
    },
    close() {
      this.dialogFormVisible = false
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  margin-top: 20px;
  text-align: right;
}
.avatar {
  width: 150px;
  height: 150px;
}
</style>

